<template>
  <div>
    <!-- 最新MV -->
    <div class="newMV" v-if="this.newdata[0]">
      <h3>
        最新MV
        <span class="more" @click="toall(newdata)">查看更多</span>
      </h3>
      <ul>
        <li @click="openlist(newdata[0].id)">
          <div class="cover">
            <p>{{this.newdata[0].name}}</p>
            <p>{{this.newdata[0].artistName}}</p>
          </div>
          <img :src="this.newdata[0].cover" alt />
        </li>
        <li @click="openlist(newdata[1].id)">
          <div class="cover">
            <p>{{this.newdata[1].name}}</p>
            <p>{{this.newdata[1].artistName}}</p>
          </div>
          <img :src="this.newdata[1].cover" alt />
        </li>
        <li @click="openlist(newdata[2].id)"> 
          <div class="cover">
            <p>{{this.newdata[2].name}}</p>
            <p>{{this.newdata[2].artistName}}</p>
          </div>
          <img :src="this.newdata[2].cover" alt />
        </li>
        <li @click="openlist(newdata[3].id)">
          <div class="cover">
            <p>{{this.newdata[3].name}}</p>
            <p>{{this.newdata[3].artistName}}</p>
          </div>
          <img :src="this.newdata[3].cover" alt />
        </li>
      </ul>
    </div>
    <!-- 推荐MV -->
    <div class="hotMV" v-if="this.hotdata">
      <h3>推荐MV</h3>
      <ul>
        <li v-for="item in this.hotdata" :key="item.id" @click="openlist(item.id)">
          <div class="cover">
            <p>{{item.name}}</p>
            <p>{{item.artistName}}</p>
          </div>
          <img :src="item.picUrl" alt />
        </li>
      </ul>
    </div>
    <!-- 功能组件 -->
    <!--  底部tabbar -->
    <tabbar></tabbar>
    <!-- MV视频 -->
    <playpage :showmv="showmv" tname="showmv" :closelist="closelist" :curid="curid"></playpage>
  </div>
</template>
<script>
import tabbar from "../tabbar/tabbar";
import playpage from "./playpage";
import { url, mvfirst, personalizedmv } from "../../api/api";
export default {
  data() {
    return {
      newdata: [], //  最新MV
      hotdata: [], //  推荐MV
      show: false,  //  打开所有MV
      showmv:false,  //  打开MV视频
      curid:"",  //  当前点击的MV
    };
  },
  mounted() {
    this.getmvfirst();
    this.getpersonalizedmv();
  },
  components: {
    tabbar,
    playpage
  },
  methods: {
    //  打开视频的回调函数
    openlist(id){
      this.curid = id
      this.showmv=true
    },
    //  关闭视频的回调函数
    closelist(tname){
      this[tname] = false
    },
    //  获取推荐MV
    getpersonalizedmv() {
      this.$axios.get(`${url}${personalizedmv}`).then(
        data => {
          if (data.data.code == 200) {
            this.hotdata = data.data.result;
          }
        },
        err => {
          this.$notify.danger(err);
        }
      );
    },
    //  跳转全部MV
    toall(data) {
      this.$router.push({ name: "allvideo", params: { data: this.newdata } });
    },
    //  获取最新MV
    getmvfirst() {
      this.$axios.get(`${url}${mvfirst}`).then(
        data => {
          if (data.data.code == 200) {
            this.newdata = data.data.data;
          }
        },
        err => {
          this.$notify.danger(err);
        }
      );
    }
  }
};
</script>
<style scoped>
h3 {
  margin: 10px;
}
.newMV ul,
.hotMV ul {
  width: 375px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.newMV ul li,
.hotMV ul li {
  width: 150px;
  height: 100px;
  margin: 10px;
  position: relative;
}
.newMV ul li p,
.hotMV ul li p {
  width: 150px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.cover {
  width: 150px;
  position: absolute;
  color: #fff;
  top: 0;
  left: 0;
  padding-top: 62px;
}
.newMV ul li img,
.hotMV ul li img {
  width: 150px;
  height: 100px;
  background: rgba(255, 255, 255, 0.9);
}

h3 .more {
  float: right;
  border: 1px solid #ccc;
  font-size: 12px;
  border-radius: 20px;
  padding: 5px;
}
</style>